<template>
	<div class="discount-item">
		<div class="discount-item-img">
			<router-link :to="{path:'/detail', query: {goodsId: product.goods_id}}" target="_blank">
				<img v-lazy="product.goods_img" :alt="product.goods_name" :title="product.goods_name" imgtype='special'/>
			</router-link>
		</div>
		<div class="discount-item-title">
			<router-link :to="{path: '/detail', query: {goodsId: product.goods_id}}" target="_blank">{{ product.goods_name }}</router-link>
		</div>
    <template v-if="product.goods_price > 200">
			<div class="discount-item-installment-price">
				{{$t('message.installmentPrice')}}{{$t('message.currencySymbol')}}<span class="discount-item-big-price">{{ product.staging_price }}</span>{{$t('message.up')}}<br v-if="parseInt(product.staging_price) < 10000"><span class="discount-item-no-price">{{$t('message.currencySymbol')}}{{ product.goods_price }}</span>
			</div>
			<!-- 折扣标签 -->
			<!-- <div class="discount-item-tab">
				<div class="discount-item-percent">
					{{ product.discounts }}%
				</div>
				<div class="discount-item-label">
					OFF
				</div>
			</div> -->
    </template>
    <template v-else>
			<div class="discount-item-installment-price">
				{{$t('message.currencySymbol')}}<span class="discount-item-big-price">{{ product.goods_price }}</span>
			</div>
			<!-- 折扣标签 -->
			<!-- <div class="discount-item-tab">
				<div class="discount-item-percent">
					{{ product.discounts }}%
				</div>
				<div class="discount-item-label">
					OFF
				</div>
			</div> -->
    </template>
	</div>
</template>

<script>
export default {
  name: 'IndexDiscountItem',
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.discount-item {
	padding: 50px 29px 45px 25px;
	background-color: #fff;
	position: relative;
}

.discount-item-img {
	width: 168px;
	height: 168px;
	margin: 0 auto;
}

.discount-item-img img {
  width: 100%;
  height: 100%;
}

.discount-item-title {
	width: 240px;
	line-height: 22px;
	font-size: 16px;
	margin: 40px 0 8px;
}
.discount-item-title a {
  color: #333;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.discount-item-title a:hover {
  color: #ff600a;
  text-decoration: underline;
}

/* .discount-item-total-price {
	height: 22px;
	line-height: 22px;
	font-size: 16px;
	color: #676767;
	text-decoration: line-through;
} */

.discount-item-installment-price {
	height: 17px;
	line-height: 17px;
	font-size: 12px;
	color: #ff600a;
	/* margin-top: 20px; */
}

.discount-item-big-price {
	font-size: 20px;
	padding: 0 2px;
}

.discount-item-no-price {
  /* margin-left: 16px; */
	color: #676767;
	text-decoration: line-through;
}

.discount-item-tab {
	width: 44px;
	height: 50px;
	color: #fff;
	text-align: center;
	background: url(../../assets/images/index/icon_discount.png) no-repeat center;
	position: absolute;
	top: 20px;
	right: 25px;
}

.discount-item-percent {
	height: 15px;
	line-height: 15px;
	font-size: 13px;
	margin-top: 6px;
}

.discount-item-label {
	height: 14px;
	line-height: 14px;
	font-size: 12px;
	margin-top: 3px;
}
</style>
